<template>
  <div class="travel-master">
    <ChatInterface
      title="旅游大师"
      :messages="travelStore.messages"
      :loading="travelStore.loading"
      :error="travelStore.error"
      empty-state-message="让我来帮您规划完美的旅程！"
      @send-message="handleSendMessage"
      @clear-chat="handleClearChat"
    />
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
import { useTravelStore } from '../stores/travelStore'
import ChatInterface from '../components/ChatInterface.vue'

const travelStore = useTravelStore()

const handleSendMessage = async (message) => {
  await travelStore.sendMessage(message)
}

const handleClearChat = () => {
  travelStore.clearMessages()
}

// 组件挂载时显示欢迎消息
onMounted(() => {
  if (travelStore.messages.length === 0) {
    travelStore.messages.push({
      role: 'assistant',
      content: '您好！我是您的专属旅游顾问。无论是国内游还是国际游，我都可以为您提供专业的建议和行程规划。请告诉我您想去哪里旅行，或者您有什么具体的旅游需求？',
      timestamp: new Date().toISOString()
    })
  }
})
</script>

<style scoped>
.travel-master {
  height: 100vh;
  background-color: #f9f9f9;
}
</style>